<template>
  <div v-if="op">

    <h1>资源列表</h1>
    <SearchTypeSelector v-model="FType" />
    <input type="text" v-model="FName" placeholder="文件名" />
    <button @click="allResources(FName, FType, -1)">搜索</button>
    <TraverseResource :resourceList="resourceList1" @select="handleSelect"></TraverseResource>

  </div>

  <div v-if="!op">
    <h1>具体信息</h1>
    <button @click="returnList">返回</button>
    <div v-if="resourceInformation">
      <div v-if="resourceInformation">
        <p><strong>ID:</strong> {{ resourceInformation.id }}</p>
        <p><strong>资源名称:</strong> {{ resourceInformation.resourceName }}</p>
        <p><strong>资源类型:</strong> {{ resourceInformation.resourceType }}</p>
        <p><strong>版本:</strong> {{ resourceInformation.version }}</p>
        <p><strong>自定义名称:</strong> {{ resourceInformation.customerName }}</p>
        <p><strong>更新时间:</strong> {{ resourceInformation.updateTime }}</p>
        <p><strong>下载次数:</strong> {{ resourceInformation.downloadCount }}</p>
        <p><strong>描述:</strong> {{ resourceInformation.description }}</p>
        <p><strong>提供者:</strong> {{ resourceInformation.providerName }}</p>
      </div>
      <div v-else>
        <DelayedDisplay>
          <p>获取失败</p>
        </DelayedDisplay>
      </div>
    </div>

    <div v-if="imageList.length > 0">
      <div v-for="(image, index) in imageList" :key="index" style="margin-bottom: 10px;">
        <img :src="image" alt="资源图片" style="max-width: 100%; height: auto;" />
      </div>
    </div>
    <div v-else>
      <DelayedDisplay>
        <p>未上传图片</p>
      </DelayedDisplay>
    </div>
    <button @click="download">下载</button>
    <button @click="report">举报</button>
  </div>


</template>

<style scoped></style>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { Resource } from '@/model/resource'
import SearchTypeSelector from '@/components/SearchTypeSelector.vue'
import TraverseResource from '@/components/TraverseResource.vue'
import { getResourceImagesAPI, getResourceInformationAPI, searchResourceAPI } from '@/service/API'

//响应数据
const resourceList1 = ref<Resource[]>([])
const FType = ref<string>('all')
const FName = ref<string>('')
const formData = new FormData();
const imageList = ref<string[]>([])
const resourceInformation = ref<Resource | null>(null)
const op = ref(true)
let resourceId: number

/**
 * 搜索资源
 * 
 * @remarks
 * 该函数用于搜索资源，当前的搜索条件是文件名、资源类型和版本号
 * @param {string} name - 文件名
 * @param {string} version - 版本号
 * @param {number} providerId - 提供者ID，-1 表示所有提供者
 * @returns Promise<{ success: boolean, resources: Resource[] | null }>
 */
const allResources = async (name: string, version: string, providerId: number) => {
  const { R_searchResourceAPI, resources } = await searchResourceAPI(name, version, providerId)
  if (R_searchResourceAPI) {
    if (resources) {
      resourceList1.value = resources
    }
  }
}

/**
 * 选择资源时的回调函数
 * 
 * @param id - 选择的资源的 ID
 */
const handleSelect = (id: number) => {
  // 选择的资源的 ID
  resourceId = id
  console.log('点击了 id=' + resourceId + ' 的资源');
  // 获取资源信息和图片
  getResource()
  // 隐藏资源列表
  op.value = false
}

/**
 * 获取资源信息和图片
 * 
 * @remarks
 * 该函数用于获取资源的信息和图片，通过对应的 API
 * @returns Promise<void>
 */
const getResource = async () => {
  // 重置图片列表和资源信息
  imageList.value = []
  resourceInformation.value = null
  try {
    // 通过 GET 请求获取资源信息
    const { R_getResourceInformationAPI, resource } = await getResourceInformationAPI(resourceId)
    if (R_getResourceInformationAPI) {
      console.log('资源信息已加载');
      resourceInformation.value = resource
    } else {
      console.log('资源信息未加载' + R_getResourceInformationAPI);
    }
    // 通过 GET 请求获取资源图片
    const { R_getResourceImagesAPI, images } = await getResourceImagesAPI(resourceId)
    if (R_getResourceImagesAPI && images) {
      console.log('资源图片已加载' + R_getResourceImagesAPI);
      imageList.value = images
    } else {
      console.log('资源图片未加载' + R_getResourceImagesAPI);
    }
  } catch (error) {
    // 捕获并记录获取资源信息和图片的错误
    console.error('获取资源信息和图片失败:', error)
  }
}

/**
 * 下载资源
 * 
 * @remarks
 * 该函数用于下载资源，通过 GET 请求获取资源的 URL，然后使用 <a> 元素来下载资源
 * @param id - 要下载的资源的 ID
 */
const download = () => {
  console.log("开始下载资源 id：" + resourceId)
  // 构造下载 URL
  const url = `/api/resources/download/${resourceId}`
  // 创建一个隐藏的 <a> 元素
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', '') // 有的浏览器需要这个才能下载
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const report = () => {

}

/**
 * 返回资源列表
 * 
 * @remarks
 * 该函数用于返回资源列表，回到资源列表的界面
 */
const returnList = () => {
  // 使资源列表可见
  op.value = true
}


//页面初始化加载
onMounted(() => {
  allResources(FName.value, FType.value, -1)
})

watch([FType, FName], () => {
  formData.set('resourceName', FName.value);
  formData.set('resourceType', FType.value);
})

</script>
